<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	</head>
	<body>
		
		<div  id="app">
			
			<el-row>
				<el-button type="primary" v-on:click="addForm()"  >新增数据</el-button>
			</el-row>
			 
			
			 <el-table  :data="rows"  border  style="width: 100%">
			    <el-table-column  prop="id" label="学号" width="80" > </el-table-column>
			    <el-table-column  prop="name" label="姓名"  width="180"> </el-table-column>
			    <el-table-column label="性别"> 
				    <template slot-scope="scope">
						{{scope.row.sex}} 
						<img v-if="scope.row.sex==='男'" src="images/man.png">
						<img v-else src="images/woman.png">
					</template>
				</el-table-column>
				
				 <el-table-column label="操作">
				    <template slot-scope="scope">
				        <el-button  size="mini"
				          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
				        <el-button size="mini"
				          type="danger"
				          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
				    </template>					  
			  </el-table>
			  
			   <el-pagination
			        @size-change="handleSizeChange"
			        @current-change="handleCurrentChange"
			        :current-page="queryParams.page"
			        :page-sizes="[10, 20, 30, 40]"
			        :page-size="queryParams.size"
			        layout="total, sizes, prev, pager, next, jumper"
			        :total="total">
			      </el-pagination>
			  
			  
			  <!-- 对话框-->
			  <el-dialog 	v-bind:title="title"  :visible.sync="dialogVisible"  width="500px"  :close-on-click-modal="false"   >
			    <!-- 内容 -->
				<el-form ref="form" :model="form" label-width="80px">
				  
				  <el-form-item label="学号" prop="id" :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
				    <el-input v-model="form.id"></el-input>
				  </el-form-item> 
				  
				  <el-form-item label="姓名" prop="name" :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
				    <el-input v-model="form.name"></el-input>
				  </el-form-item> 
				  
				 
				  <el-form-item label="性别">
				    <el-radio-group v-model="form.sex">
				       <el-radio label="男">男</el-radio>
				       <el-radio label="女">女</el-radio>
				    </el-radio-group>
				  </el-form-item> 
				 
				</el-form>
				
			    <span slot="footer" class="dialog-footer">
			      <el-button @click="resetForm">取 消</el-button>
			      <el-button type="primary" @click="saveFormBefore">确 定</el-button>
			    </span>
			  </el-dialog>
			 
		</div>
		
	</body>
	
	<!-- 引入vue核心文件(编译引擎) -->
	<script src="js/vue.js"></script>
	
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	
	<script>
		//实例化vue对象
		var app = new Vue({
		  //vue引擎要管理的html节点在哪里 el--> element
		  el: '#app',
		  //vue管理内部私有的数据
		  data: {
		    rows: [],
			total:0,
			//查询条件
			queryParams: {
				page: 1,
				size: 10
			},
			//对话框的变量
			title: '添加数据',
			dialogVisible: false,
			form: {
				sex: '男'
			},
			//修改数据下标
			editIndex: undefined
		  },
		  //初始化调用方法vue规定
		  created() {
		  	this.searchData()
		  },
		  //自定义方法
		  methods: {
			  //真的提交数据到后台
			  saveForm(){
				  //新增，还是修改
				  if(this.title==='添加数据'){
					  //json序列化和反序列化
					  let jsonStr=JSON.stringify(this.form)
					  this.rows.push( JSON.parse(jsonStr))
					  this.total++
					  this.$message({type: 'success', message: '新增数据成功!'});
					  this.resetForm()
					  
				  }else{
					   
					   //数据是变化了，但是element-ui认不到的，vue认为不是响应式的数据
					   // this.rows[this.editIndex].id =this.form.id
					   // this.rows[this.editIndex].name =this.form.name
					   // this.rows[this.editIndex].sex =this.form.sex
					   
					   //更优化写法
					   let oldObj= this.rows[this.editIndex];
					   for(let key in this.form){
					    oldObj[key] = this.form[key];
					   }
					   
					   
					  this.$message({type: 'success', message: '修改数据成功!'});
					  this.resetForm()
				  }				  
			  },
			  //提交保存数据之前验证
			  saveFormBefore(){
				  //验证数据是否都有效了
				   this.$refs['form'].validate((valid) => {
						if (valid) {
						   //验证成功
						   this.$confirm('确定要保存数据吗?', '提示', {
						             confirmButtonText: '确定',
						             cancelButtonText: '取消',
						             type: 'warning'
						           }).then(() => {
						              //提交
									  this.saveForm()
						           }).catch(() => {
						             //不提交操作									 
						           });
						   
						} else { 
						  return false;
						}
					  });
			  },			  
			  //重置表单
			  resetForm(){
				  //清空验证规则样式
				  this.$refs['form'].resetFields();
				  
				  //清除数据
				  this.form={
				     sex: '男'
			      }
				  //关闭对话框
				  this.dialogVisible =false
			  },
			  // 添加数据按钮事件
			  addForm(){
				  //显示对话框
				  this.dialogVisible =true
				  this.title='添加数据'
			  },
			  //模拟后台查询数据
			  searchData(){				  
				  //总共1001笔
				  this.total=1001
				  //清空数据
				  this.rows=[]
				  
				  for(let i=0;i<this.queryParams.size;i++){
					  let start=(this.queryParams.page-1)* this.queryParams.size
					  //http://it028.com/jsref-obj-array.html     push方法
					  this.rows.push( {id:start+i+1, name: '小张'+(start+i+1),sex:i%2===0?'男':'女'})					  
				  }	
			  },
			  //编辑
			  handleEdit(index, row) {
				  //记录修改下标
				  this.editIndex =index 
			     console.log(index, row);
				 //如果数据库连接数据库，   根据id查询一次
				 // this.form= {
					//  id: row.id,
					//  name:row.name,
					//  sex:row.sex
				 // } 
				 
				 //如果数据量比较大  json序列化和反序列化
				 let  jsonValue= JSON.stringify(row);
				 console.log(jsonValue);
				 this.form= JSON.parse(jsonValue);
				 
				 this.title='修改数据'
				 this.dialogVisible=true
			  },
			  //删除
			  handleDelete(index, row) {
			    
				 this.$confirm('确定要删除此笔数据吗?', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
							
							//删除这一行数据
						 this.rows.splice(index,1);
						 this.total--;
							
				          this.$message({
				            type: 'success',
				            message: '删除成功!'
				          });
						  
				        }).catch(() => {				                
				        });
			 },
			 //分页条，每页几笔发生变化
			 handleSizeChange(val) {
				 this.queryParams.page=1
				 this.queryParams.size=val
			    //查询后台数据
				this.searchData()
			},
			//当前是第几页发生变化
			handleCurrentChange(val) {
				this.queryParams.page=val
			    //查询后台数据
				this.searchData()
			}
		  }
		})
		
	</script>
</html>